<style lang="less" scoped>
.contentbox{
  padding: 144px 25px 10px;
  text-align: center;
  .currentavatar{
    width: 121px;
    height: 121px;
    border: 2px solid #5BE6FF;
    border-radius: 50%;
    margin-bottom: 44px
  }
  .avatarbox{
    border: 2px solid #444444;
    padding: 38px 37px;
    display: flex;
    flex-wrap: wrap;
    div{
      width: 25%;
      height: 25%;
      padding: 22px 25px;
      box-sizing: border-box;
      text-align: center;
      img{
        width: 106px;
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
      }
      .avataractive{
        border-color: #5BE6FF;
      }
    }
    .uploadbox{
      width: 106px;
      height: 106px;
      border-radius: 50%;
      position: relative;
      background-image: url(../../assets/images/addimg.png);
      background-position: center;
      background-size: 108px 108px;
      input{
        position: absolute;
        top: 0;
        left: 0;
        width: 106px;
        height: 106px;
        opacity: 0;
      }
    }
  }
  .actionbtn{
    width: 607px;
    height: 82px;
    background: #FFA22A;
    margin: 100px auto 10px;
    font-size: 30px;
    color: #000;
    line-height: 82px;
  }
}
</style>

<template>
  <top-bar></top-bar>
  <div class="contentbox">
    <img class="currentavatar" :src="currentAvatar" alt="">
    <div class="avatarbox" >
      <div v-for="(avatar, index) in avatarStore" :key="index">
        <img :src="avatar.url" @click="changeAvatar(avatar)" :class="{avataractive: avatar.actived}" alt="">
      </div>
      <div>
        <p class="uploadbox">
          <input type="file" @change="upload" ref="uploader">
        </p>
      </div>
    </div>
    <div class="actionbtn" @click="save">保存</div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { provide, reactive, ref, onMounted } from "vue"
import { uploadfile, updateUser } from '../../api/home.js'
import { Toast } from 'vant'
export default {
  setup() {
    const store = useStore()
    provide('title', '修改头像')
    let currentAvatar = ref(store.state.userMsg.photo)
    let uploader = ref(null)
    let avatarStore = reactive([
      {
        url: 'http://211.149.139.110:81/group1/M00/00/00/wKiLbmF6WU2ABsBrAACYV4KMVXY983.png',
        actived: true,
      },
      {
        url: 'http://211.149.139.110:81/group1/M00/00/00/wKiLbmF6WU2ABsBrAACYV4KMVXY983.png',
        actived: false
      },
      {
        url: 'http://211.149.139.110:81/group1/M00/00/00/wKiLbmF6WU2ABsBrAACYV4KMVXY983.png',
        actived: false
      },
      {
        url: 'http://211.149.139.110:81/group1/M00/00/00/wKiLbmF6WU2ABsBrAACYV4KMVXY983.png',
        actived: false
      },
      {
        url: 'http://211.149.139.110:81/group1/M00/00/00/wKiLbmF6WU2ABsBrAACYV4KMVXY983.png',
        actived: false
      },
      {
        url: 'http://211.149.139.110:81/group1/M00/00/00/wKiLbmF6WU2ABsBrAACYV4KMVXY983.png',
        actived: false
      },
      {
        url: 'http://211.149.139.110:81/group1/M00/00/00/wKiLbmF6WU2ABsBrAACYV4KMVXY983.png',
        actived: false
      }
    ])
    const changeAvatar = (data) => {
      avatarStore.forEach(item => item.actived = false)
      currentAvatar.value = data.url
      data.actived = true
    }

    const upload = async () => {
      console.log(uploader.value.files)
      const query = new FormData()
      query.append('file', uploader.value.files[0])
      const res = await uploadfile(query)
      if (res.code === 200) {
        currentAvatar.value = res.data
        avatarStore.forEach(item => item.actived = false)
      } else {
        Toast.fail(res.msg)
      }
    }
    const save = async () => {
      const res = await updateUser({ photo: currentAvatar.value })
      if (res.code === 200) {
        store.commit('changeUserMsg', res.data)
      }
    }
    onMounted(() => {
      currentAvatar.value = store.state.userMsg.photo
    })
    return {
      store,
      currentAvatar,
      avatarStore,
      changeAvatar,
      upload,
      uploader,
      save
    }
  }
}
</script>